<template>
  <div class="index utils-flex-Justbetween utils-flex-dir">
    <div class="top utils-after-bg item">
      <slot name="top">
        <div class="text-right" style="height: 100%;">
          <div style="height: 100%;width: 100%;position: relative;z-index: 999;">
            <!-- <m-video></m-video> -->
            <video ref="video" id="home_video" :src="videoSrc" autoplay controls loop
              style="width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 99999;" />
          </div>
        </div>
      </slot>
    </div>
    <div class="middle utils-after-bg item">
      <slot name="middle">
        <div class="text-right" style="height: 100%;">
          <div style="height: 100%;width: 100%;">
            <video ref="video" id="home_video" :src="videoSrc" autoplay controls loop
              style="width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 99999;" />
          </div>
        </div>
      </slot>
    </div>
    <div class="bottom utils-after-bg item">
      <slot name="bottom">
        <div class="text-right" style="height: 100%;">
          <div style="height: 100%;width: 100%;">
            <!-- <video ref="video" id="home_video" :src="videoSrc" autoplay controls loop style="width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 99999;" /> -->
            <!-- <connect-us></connect-us> -->
            <div class="message" id="message_">
              <header>{{ context.data.header }}</header>
              <div class="m" id="hgundong">
                <div class="text1" id="hgundong1">{{context.data.context}}</div>
                <div style="height: 40px;"></div>
                <div class="text2" id="hgundong2">{{context.data.context}}</div>
              </div>
            </div>
          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
  // import weather from '@/components/weather';
  import connectUs from '@/components/item/connectUs/index.vue';
  import templateBox from '@/components/item/templateBox/templateBox.vue';
  import { jianjie } from '@/assets/config/config.js'
  var time;
  export default {
    components: {
      connectUs,
      templateBox
    },
    data() {
      return {
        videoSrc: 'static/model/video/mp4/torch2020.mp4',
        queryInfo: {
          BDate: '2020-01-02 07:40:12',
          EDate: '2021-04-02 07:40:12',
          action: 'Temperature'
        },
        context: jianjie
      };
    },
    mounted() {
      // this.getService();
      this.scoll()
    },
    methods: {
      scoll() {
        console.log("开始滚动");
        var htab = document.getElementById('hgundong');
        var htab1 = document.getElementById('hgundong1');
        var htab2 = document.getElementById('hgundong2');
        // htab2.innerHTML = htab1.innerHTML;
        console.log(htab1);
        htab.scrollTop = htab1.offsetHeight;
        if (time) {
          clearInterval(time);
        }

        function Marquee() {
          // i++;
          if (htab.scrollTop >= htab1.offsetHeight + 50) {
            htab.scrollTop -= htab2.offsetHeight;
          } else {
            htab.scrollTop += 5;
          }
        }
        time = setInterval(Marquee, 100);
      }
    }
  };
</script>

<style scoped lang="less">
  @media only screen and (max-width: 1200px) {
    #message_ {
      padding: 5px;
      color: #2BC7F6;
      overflow: hidden;
      height: 100%;
      padding-top: 0px;
      font-size: 15px;

      header {
        text-align: center;
        // background: ;
        height: 10%;
        font-size: 16px;
        margin: 0;
        text-shadow: 0 0 5px #2bc7f6;
        margin-bottom: 10px;
      }

      .text {
        font-size: 14px;
      }
    }

  }

  .index {
    height: 100%;
    width: 100%;

    .item {
      width: 100%;
      // border: 1px solid red;
    }

    .top {
      height: 32%;
    }

    .middle {
      height: 30%;
    }

    .bottom {
      height: 27%;

      .message {
        padding: 5px;
        color: #2BC7F6;
        overflow: hidden;
        height: 100%;
        padding-top: 0px;
      }

      header {
        text-align: center;
        // background: ;
        height: 10%;
        font-size: 23px;
        margin: 0;
        text-shadow: 0 0 5px #2bc7f6;
        margin-bottom: 10px;
      }
      .m {
        height: 90%;
        overflow: hidden;
      }
    }
  }
</style>
